<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-24 09:45:06
 * @LastEditTime: 2022-07-20 20:21:27
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 审批节点展示
 * @Motto: Write the code. Change the world.
-->
<template>
  <a-timeline class="approval-node">
    <a-timeline-item
      v-for="(process, processIndex) of list"
      :key="processIndex"
    >
      <!-- 节点图标 -->
      <template #dot>
        <!-- 提交 -->
        <template v-if="process.type == 'submit'">
          <div class="approval-node-icon icon-finished-gray">
            <cu-icon type="org-ar-submit" />
            <CheckCircleFilled class="result-icon success" />
          </div>
        </template>
        <!-- 审批 -->
        <template v-else>
          <div class="approval-node-icon">
            <cu-icon type="org-shenpi-weixuanzhong3x" />
            <template v-if="process.group_status">
              <CheckCircleFilled
                v-if="process.group_status == 1"
                class="result-icon success"
              />
              <CloseCircleFilled v-else class="result-icon fail" />
            </template>
          </div>
        </template>
      </template>
      <!-- 节点显示 -->
      <div class="approval-node-status">
        <a-row class="w-100p" :gutter="24">
          <a-col :xs="24" :xxl="6" :sm="6" :md="6" :lg="6" :xl="6">
            <template v-if="process.type == 'submit'">
              <!-- 提交 节点-->
              <div class="title">提交</div>
              <div class="time">{{ process.time }}</div>
            </template>
            <template v-else>
              <!-- 审核 节点-->
              <div class="title">
                <span v-if="process.group_status">
                  {{ nodeStatusMap[process.group_status].text }}
                </span>
                <span v-else>待审批</span>
                <a-tag
                  color="blue"
                  class="ml-10"
                  v-if="process.jointly_sign_txt"
                  >{{ process.jointly_sign_txt }}</a-tag
                >
              </div>
            </template>
          </a-col>
          <a-col
            :xs="24"
            :xxl="18"
            :sm="18"
            :md="18"
            :lg="18"
            :xl="18"
            class="col-right"
          >
            <a-row class="avator-item" v-if="process.type == 'submit'">
              <!-- 提交人员 -->
              <div class="avator">
                <a-avatar shape="square" :size="38">
                  <template #icon>
                    <cu-icon type="org-yonghu" />
                  </template>
                </a-avatar>
                <CheckCircleOutlined class="result-icon success" />
              </div>
              <div class="user">
                <div class="name">{{ process.name }}</div>
                <div class="tip">{{ process.tip }}</div>
              </div>
            </a-row>
            <template v-else>
              <!-- 审核人员 -->
              <a-row
                class="avator-item"
                v-for="user of process.approveList"
                :key="'approval_' + user.id"
                :wrap="false"
              >
                <div class="avator">
                  <a-avatar shape="square" :size="38">
                    <template #icon>
                      <cu-icon type="org-yonghu" />
                    </template>
                  </a-avatar>
                  <CheckCircleOutlined
                    v-if="user.status == 1"
                    class="result-icon success"
                  />
                  <CloseCircleOutlined
                    v-if="user.status > 1"
                    class="result-icon fail"
                  />
                </div>
                <div class="user">
                  <div class="name">
                    <span>{{ user.name }}</span>
                    <a-tag
                      v-if="!user.status"
                      color="orange"
                      class="ml-10"
                      style="font-weight: normal"
                    >
                      待审批
                    </a-tag>
                  </div>
                  <div class="tip" v-if="user.approve_time">
                    <span>
                      审批时间：
                      {{ user.approve_time }}
                    </span>
                  </div>
                  <div class="tip" v-if="user.remark">
                    <span>
                      审批意见：
                      {{ user.remark }}
                    </span>
                  </div>
                  <div class="tip" v-if="user.remark_files">
                    <span> 审批附件： </span>
                    <div>
                      <div
                        v-for="(item, index) of user.remark_files"
                        :key="index"
                        @click="downloadFile(item.url)"
                      >
                        <span style="margin-right: 4px">{{ index + 1 }}.</span>
                        <span class="text-primary pointer">{{
                          item.name
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </a-row>
              <!-- 抄送人员 -->
              <a-row
                type="flex"
                align="middle"
                class="copy-list"
                v-if="process.copySendList.length"
              >
                <a-col>
                  <a-tag color="purple">抄送人</a-tag>
                </a-col>
                <a-col flex="auto" class="flex flex-wrap">
                  <div
                    class="flex align-center mr-20"
                    v-for="user of process.copySendList"
                    :key="'copy_' + user.id"
                  >
                    <div class="avator">
                      <a-avatar shape="square">
                        <template #icon>
                          <cu-icon type="org-yonghu" />
                        </template>
                      </a-avatar>
                      <CheckCircleOutlined
                        v-if="user.status == 1"
                        class="result-icon success"
                      />
                      <CloseCircleOutlined
                        v-if="user.status > 1"
                        class="result-icon fail"
                      />
                    </div>
                    <div class="user" style="margin-left: -5px">
                      <span class="name">{{ user.name }}</span>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-col>
        </a-row>
      </div>
    </a-timeline-item>
  </a-timeline>
</template>

<script>
import { defineComponent } from "vue";
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  CheckCircleFilled,
  CloseCircleFilled,
} from "@ant-design/icons-vue";

export default defineComponent({
  name: "ApprovalNode",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    CheckCircleOutlined,
    CloseCircleOutlined,
    CheckCircleFilled,
    CloseCircleFilled,
  },
  setup() {
    const downloadFile = (url) => {
      window.open(url);
    };
    return {
      nodeStatusMap,
      memberStatusMap,
      downloadFile,
    };
  },
});
// 节点审核状态
const nodeStatusMap = {
  1: {
    text: "审批通过",
    type: "sucess",
  },
  2: {
    text: "审批不通过",
    type: "fail",
  },
  3: {
    text: "审批已关闭",
    type: "fail",
  },
  4: {
    text: "审批已关闭",
    type: "fail",
  },
};
// 人员审核状态
const memberStatusMap = {
  1: {
    text: "已通过",
    type: "sucess",
  },
  2: {
    text: "已拒绝",
    type: "fail",
  },
  3: {
    text: "已关闭",
    type: "fail",
  },
  4: {
    text: "已关闭",
    type: "fail",
  },
};
</script>

<style lang="less" scoped>
.approval-node {
  margin: 10px;
  .approval-node-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    position: relative;
  }
  .icon-finished-blue {
    background: @primary-color;
  }
  .icon-finished-gray {
    background: #848fad;
  }
  .approval-node-status {
    line-height: 24px;
    margin-left: 20px;
    .title {
      font-size: 15px;
      color: #333;
      font-weight: bold;
    }
    .time {
      color: #999;
      font-size: 12px;
    }
    .col-right {
      padding-bottom: 20px;
      border-bottom: 1px solid #f4f4f4;
      .avator-item {
        // width: 100%;
        display: flex;
        margin-bottom: 10px;
        // width: 233px;
      }
      .avator {
        position: relative;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        &:deep(.ant-avatar) {
          background: #ddd;
        }
        .result-icon {
          right: 4px;
          bottom: 4px;
          font-size: 12px;
        }
      }
      .copy-list {
        padding: 15px;
        border-top: 1px solid #f4f4f4;
        // margin-top: 200px;
        .copy-name {
          font-weight: bold;
          line-height: 30px;
          color: @primary-color;
        }
      }

      .user {
        line-height: 24px;
        margin-left: 10px;
        flex: 1;
        .name {
          font-weight: bold;
        }
        .tip {
          font-weight: normal;
          color: #999;
          font-size: 12px;
          display: flex;
        }
      }
    }
  }
  .success {
    color: @success-color;
  }
  .fail {
    color: @error-color;
  }
  .result-icon {
    position: absolute;
    right: -4px;
    bottom: -4px;
    font-size: 16px;
  }
}
</style>
